import React, { PureComponent } from "react";
import { Form, DatePicker } from "antd";
import moment from "moment";
import locale from "antd/lib/date-picker/locale/zh_CN";
const { RangePicker } = DatePicker;

@Form.create()
class SearchBar extends PureComponent {
  state = {};
  componentDidMount() {}
  handleSubmit = () => {
    // 避免快捷选择时间，不能实时更新
    setTimeout(() => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let start_time = values.time[0];
          let end_time = values.time[1];
          const data = {
            start_time: start_time,
            end_time: end_time
          };
          this.props.setSpread(data);
        }
      });
    }, 0);
  };
  componentDidUpdate(props, state) {
    const { setFieldsValue } = this.props.form;

    if (props.data.start_t !== this.props.data.start_t || props.data.end_t !== this.props.data.end_t) {
      if (!this.props.data.start_t || !this.props.data.end_t) {
        setFieldsValue({
          time: []
        });
      } else {
        setFieldsValue({
          time: [moment(this.props.data.start_t, "YYYY-MM-DD"), moment(this.props.data.end_t, "YYYY-MM-DD")]
        });
      }
    }
  }
  // 禁用当前时间以后事件选取
  disabledDate = current => {
    // Can not select days before today and today
    return current && current > moment().endOf("day");
  };
  render() {
    const { getFieldDecorator } = this.props.form;
    const rangeConfig = {
      rules: [{ type: "array", message: "请选择时间!" }]
    };

    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <Form.Item>
            {getFieldDecorator(
              "time",
              rangeConfig
            )(
              <RangePicker
                style={{ width: 300 }}
                disabledDate={this.disabledDate}
                onOk={this.handleSubmit}
                locale={locale}
                ranges={{
                  今日: [moment().startOf("day"), moment().endOf("day")],
                  昨天: [
                    moment()
                      .subtract(1, "day")
                      .startOf()
                      .hours(0)
                      .minutes(0)
                      .seconds(0),
                    moment()
                      .subtract(1, "day")
                      .startOf()
                      .hours(23)
                      .minutes(59)
                      .seconds(59)
                  ],
                  最近7天: [
                    moment()
                      .subtract(6, "day")
                      .startOf()
                      .hours(0)
                      .minutes(0)
                      .seconds(0),
                    moment()
                      .subtract("day")
                      .startOf()
                      .hours(23)
                      .minutes(59)
                      .seconds(59)
                  ],
                  最近30天: [
                    moment()
                      .subtract(29, "day")
                      .startOf()
                      .hours(0)
                      .minutes(0)
                      .seconds(0),
                    moment()
                      .subtract("day")
                      .startOf()
                      .hours(23)
                      .minutes(59)
                      .seconds(59)
                  ],
                  本年: [moment().startOf("year"), moment().endOf("year")]
                }}
                showTime
                allowClear={false}
                format="YYYY-MM-DD"
              />
            )}
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default SearchBar;
